<template>
  <div>
    <el-dialog v-model="dialogVisible" width="30%">
      <el-card style="margin-bottom: 10px">{{ cardData.content }}</el-card>
      <el-card v-if="urlList.length > 0">
        <el-carousel height="150px">
          <el-carousel-item
            v-for="item in urlList"
            :key="item"
            style="width: 100%; display: flex; justify-content: center"
          >
            <el-image :src="item" fit="cover"></el-image>
          </el-carousel-item>
        </el-carousel>
      </el-card>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
// import { ElMessage } from 'element-plus'

const dialogVisible = ref(false);
const cardData = ref<any>();
const urlList = ref<string[]>([]);
const showDialog = (data: any) => {
  cardData.value = data;
  urlList.value = data.pictureUrlList;
  dialogVisible.value = true;
};
defineExpose({
  showDialog,
});
</script>

<style scoped lang="less"></style>
